# Introduction

Evergreen exports two components to create select inputs:

- **Select**: base text input component. Directly maps to a `select` element.
- **SelectField**: combines a label, select and validation message in one. Used for traditional forms.

The **Select** component is a styled wrapper around a native select element,
which allows selection of one item from a dropdown list.
Anytime you would reach for a native select, use this.

# Uncontrolled usage

```jsx
<Select onChange={event => alert(event.target.value)}>
  <option value="foo" selected>
    Foo
  </option>
  <option value="bar">Bar</option>
</Select>
```

# Controlled usage

```jsx
function ControlledUsageSelectExample() {
  const [value, setValue] = React.useState('foo')
  return (
    <Select value={value} onChange={event => setValue(event.target.value)}>
      <option value="foo" selected>
        Foo
      </option>
      <option value="bar">Bar</option>
    </Select>
  )
}
```

# Full width

```jsx
<Select width="100%">
  <option value="foo" selected>
    Foo
  </option>
  <option value="bar">Bar</option>
</Select>
```

# Custom width

```jsx
<Select width={240}>
  <option value="foo" selected>
    Foo
  </option>
  <option value="bar">Bar</option>
</Select>
```

# Change height

```jsx
<Select width={240} height={40}>
  <option value="foo" selected>
    Foo
  </option>
  <option value="bar">Bar</option>
</Select>
```

# SelectField Label and description

```jsx
<SelectField
  label="Default text input field"
  description="This is a description."
>
  <option value="foo" selected>
    Foo
  </option>
  <option value="bar">Bar</option>
</SelectField>
```

# SelectField with hints

A **hint** is placed under the **SelectField** to let users know what the particular form input is supposed to do .

```jsx
<SelectField label="Default text input field" hint="This is a hint.">
  <option value="foo" selected>
    Foo
  </option>
  <option value="bar">Bar</option>
</SelectField>
```

# Required select field

```jsx
<SelectField
  id="ids-are-optional"
  label="A required text input field"
  required
  description="This is a description."
>
  <option value="foo" selected>
    Foo
  </option>
  <option value="bar">Bar</option>
</SelectField>
```

# Invalid field

```jsx
<SelectField
  isInvalid
  required
  label="A required text input field"
  description="This is a description."
  validationMessage="This field is required"
>
  <option value="foo" selected>
    Foo
  </option>
  <option value="bar">Bar</option>
</SelectField>
```

# Validation message without invalid input

```jsx
<SelectField
  isInvalid={false}
  required
  label="A required text input field"
  description="This is a description."
  validationMessage="This field is required"
>
  <option value="foo" selected>
    Foo
  </option>
  <option value="bar">Bar</option>
</SelectField>
```

# Controlled usage

The `SelectField` component works the same as using `input` directly.
Use `e.target.value` to get the value of the component on change.

```jsx
function SelectFieldExample() {
  const [value, setValue] = React.useState('foo')
  return (
    <SelectField
      label="A controlled text input field"
      required
      description="This is a description."
      value={value}
      onChange={e => setValue(e.target.value)}
    >
      <option value="foo" selected>
        Foo
      </option>
      <option value="bar">Bar</option>
    </SelectField>
  )
}
```
